<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <div class="lp">
        <img slot="icon" src="@/assets/newhome/dingwei.png" />
        <span class="mainTitle">{{slow.location.address || '定位中……'}}</span>
      </div>
      <div class="rp">{{temper}}</div>
    </div>
    <div class="outermostMargin">
      <div class="card">
        <!-- 轮播图 -->
        <van-swipe class="carousel" :autoplay="3000">
          <van-swipe-item class="carItem" v-for="(image, index) in images" :key="index">
            <img :src="image" />
            <span class="szd">河口区{{fieldValues.area}}</span>
          </van-swipe-item>
        </van-swipe>
        <!-- vant 滚动公告 icon替换问题 -->
        <!-- <van-notice-bar
                  class="mynotice"
                  :scrollable="false"
                  background="#fff"
                  color="#000"
                  @click="entranceTo(4)"
                >
                  <img slot="left-icon" src="@/assets/newhome/1.png" alt srcset />
                </van-notice-bar>-->
        <ocn-notice :listData="notices" />
        <!-- 功能入口按钮区域 -->
        <div class="entrance">
          <div class="etRowBox">
            <!-- <div class="etButton" @click="entranceTo(0)">
                      <img slot="icon" :src="icons[0]" />
                      <span class="ideText">矛盾调解</span>
                    </div>-->
            <div class="etButton" @click="entranceTo(4)">
              <img slot="icon" src="@/assets/newhome/r-4.png" />
              <span class="ideText">街坊公告墙</span>
            </div>
            <div class="etButton" @click="skiprouter('/eventlist')">
              <img slot="icon" src="@/assets/newhome/r-2.png" />
              <span class="ideText">有事找格格</span>
            </div>
            <div class="etButton" @click="entranceTo(5)">
              <img slot="icon" src="@/assets/newhome/r-1.png" />
              <span class="ideText">街坊一点通</span>
            </div>
            <div class="etButton" @click="skiprouter('/activity')">
              <img slot="icon" src="@/assets/newhome/r-3.png" />
              <span class="ideText">街坊新鲜事</span>
            </div>
          </div>
          <!-- <div class="etRowBox">
                    
                    <div class="etButton" @click="entranceTo(1)">
                      <img slot="icon" :src="icons[5]" />
                      <span class="ideText">民心直通车</span>
                    </div>
                    <div class="etButton" @click="entranceTo(6)">
                      <img slot="icon" :src="icons[6]" />
                      <span class="ideText">一键通</span>
                    </div>
                    <div class="etButton" @click="entranceTo(7)">
                      <img slot="icon" :src="icons[7]" />
                      <span class="ideText">百宝箱</span>
                    </div>
                    <div class="etButton">
                      <img slot="icon" src="@/assets/m.jpg" />
                      <span class="ideText"></span>
                    </div>
                    <div class="etButton">
                      <img slot="icon" src="@/assets/m.jpg" />
                      <span class="ideText"></span>
                    </div>
                    <div class="etButton">
                      <img slot="icon" src="@/assets/m.jpg" />
                      <span class="ideText"></span>
                    </div>
                  </div>-->
        </div>
      </div>
      <!-- “热门活动”展示区域 -->
      <div class="hot">
        <div class="title">
          <span class="rpText">街坊活动</span>
          <!-- <span class="lpText" @click="entranceTo(3)">更多活动</span> -->
           <span class="lpText" @click="skiprouter('/activity')">更多活动</span>
        </div>
        <div class="top3" v-if="hotActivities.length>0">
          <div class="hotBox" v-for="(item, index) in hotActivities" :key="index" @click="ClickDetails(item)">
            <img :src="picUrl(item.url)" height="70px" />
            <p class="wzy">{{item.title}}</p>
          </div>
        </div>
        <div style="text-align:center;color: #969799;font-size: 14px;line-height: 50px;" v-else>没有更多了</div>
      </div>
      <!-- “街坊看点”区域 懒加载新闻 -->
      <div class="spot">
        <div class="title">
          <span class="text">街坊看点</span>
        </div>
        <!-- 懒加载 列表形式， item内复杂元素布局 -->
        <div class="listBox">
          <!-- <van-list style="border:1px solid #e6e6e6;" v-model="loading" :finished="finished" finished-text="" @load="onLoad"> -->
          <div v-for="(item, index) in list" :key="index" style="min-height: 200px;" @click="toNewsDet(item)" class="boxli">
            <div class="titles">
              <span class="mainTitle">{{ item.title }}</span>
              <p>
                <span class="time">{{ item.regionName }}</span>
                <span class="time">{{ item.createTime }}</span>
              </p>
            </div>
            <div class="summary">
              <span v-html="item.description "></span>
            </div>
            <div class="images">
              <img :src="item.url?picUrl(item.url):'https://img.yzcdn.cn/vant/apple-3.jpg'" />
            </div>
            <!-- <van-divider /> -->
          </div>
          <!-- </van-list> -->
          <van-pagination class="pages" v-model="currentPage" :page-count="allcount" force-ellipses @change="requestPostNews" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import myTabbar from "./components/myTabbar";
  import OcnNotice from "@/components/OcnNotice";
  export default {
    name: "home",
    data() {
      return {
        temper: "",
        icons: [
          require("../assets/newhome/i1.png"),
          require("../assets/newhome/i2.png"),
          require("../assets/newhome/i3.png"),
          require("../assets/newhome/i4.png"),
          require("../assets/newhome/i5.png"),
          require("../assets/newhome/i6.png"),
          require("../assets/newhome/i7.png"),
          require("../assets/newhome/i8.png")
        ],
        hotActivities: [{
            url: "https://img.yzcdn.cn/vant/apple-1.jpg",
            title: "小区儿童乐园"
          },
          {
            url: "https://img.yzcdn.cn/vant/apple-1.jpg",
            title: "小区篮球俱乐部"
          },
          {
            url: "https://img.yzcdn.cn/vant/apple-1.jpg",
            title: "志愿者服务活动"
          }
        ],
        images: [
          require("../assets/newhome/01.jpg"),
          require("../assets/newhome/02.jpg"),
          require("../assets/newhome/03.jpg")
        ],
        noticeText: ["1.一年内没有任何公告", "2.一年内没有任何公告"],
        number: 0,
        notices: [],
        // 街坊看点新闻数据类型，[{},{},{}……]
        list: [],
        finished: false,
        loading: false,
        pageSize: 10,
        pageIndex: 1,
        totalCount: 0,
        myInfo: 20,
        currentPage: 1,
        allcount: 1,
        fieldValues: {
          area: ""
        },
      };
    },
    computed: {
      noticelist() {
        return {
          id: this.number,
          val: this.noticeText[this.number]
        };
      }
    },
    created() {
      this.requestPostNotice();
      this.requestPostNews();
      this.rquestPostTemperature();
      this.rquestPostqh();
      this.loadHotActivities();
      // 接口测试
      this.requestTest();
    },
    components: {
      myTabbar: myTabbar,
      OcnNotice
    },
    methods: {
      // 根据dataAreaCode 反推地址
      analysisDataAreaCode(areaCode) {
        let parentCode = "";
        for (let item in this.area.Committe) {
          if (areaCode === this.area.Committe[item].dataAreaCode) {
            this.fieldValues.area = this.area.Committe[item].name;
            parentCode = this.area.Committe[item].parentId;
          }
        }
        if (parentCode) {
          for (let item in this.area.street) {
            if (parentCode === this.area.street[item].id) {
              this.fieldValues.area =
                this.area.street[item].name + this.fieldValues.area;
            }
          }
        }
        console.log(this.fieldValues.area)
      },
      rquestPostqh() {
        this.$toast.loading({
          message: "区划加载中...",
          forbidClick: true
        });
        this.post("region/regionTree")
          .then(res => {
            this.$toast.clear();
            this.area = res.map;
            this.analysisDataAreaCode(window.localStorage.getItem("dataAreaCode"));
            this.area.street.forEach(element => {
              if (element.parentId === this.area.area[0].id) {
                this.columns[0].valuesorigin.push(element);
                this.columns[0].values.push(element.name);
              }
            });
            this.area.Committe.forEach(element => {
              if (element.parentId === this.columns[0].valuesorigin[0].id) {
                this.columns[1].valuesorigin.push(element);
                this.columns[1].values.push(element.name);
              }
            });
            console.log(this.area)
          })
          .catch(err => {
            this.$toast.clear();
            console.log("异常", err);
          });
      },
      skiprouter(path) {
        if (!this.slow.isAuth) {
          this.$router.push("/register");
        } else {
          this.$router.push(path);
        }
        //  if (this.slow.userInfo.subscribe == 0 || !this.slow.isAuth) {//没关注
        //   this.$router.push("/register");
        // }else {
        //   this.$router.push(path);
        // }
      },
      entranceTo(w) {
        switch (w) {
          case 0:
            this.$router.push("/conMediation");
            break;
          case 1:
            this.$router.push("/knockOut");
            break;
          case 2:
            // this.$router.push("/lattice");
            this.$router.push("/eventlist");
            break;
          case 3:
            this.$router.push("/activity");
            break;
          case 4:
            this.$router.push("/noticeList");
            break;
          case 5:
            this.$router.push("/convenientService");
            break;
          case 6:
            this.$router.push("/ptt");
            break;
          case 7:
            this.$router.push("/treasureChest");
            break;
          default:
            this.$router.push("/home");
        }
      },
      toNewsDet(item) {
        this.$router.push({
          path: "/newsDet",
          query: {
            DetailData: item
          }
        });
      },
      // 天气
      getweather() {
        this.get(
          "http://api.map.baidu.com/telematics/v3/weather?location=%E4%B8%9C%E8%90%A5%E6%B2%B3%E5%8F%A3&output=json&ak=QoWp3MHHGsyvWvcz2M329C36VIL0pBDi"
        ).then(r => {});
      },
      // onLoad() {
      //   // 异步更新数据
      //   setTimeout(() => {
      //     // 向街坊看点list push数据
      //     this.loading = true;
      //     this.requestPostNews();
      //     // 加载状态结束
      //     this.loading = false;
      //     // 数据全部加载完成
      //     if (this.list.length >= this.totalCount) {
      //       // 判断列表后台反馈数据总量=目前的数据量则结束
      //       this.finished = true;
      //     }
      //   }, 1000);
      // },
      // 跳转至热门活动详情
      ClickDetails(item) {
        this.$router.push({
          path: "/activityDetails",
          query: {
            DetailData: item
          }
        });
      },
      // 请求获取公告信息
      requestPostNotice() {
        this.post("Info_publish/loadInfo_public", {
            pageSize: 10,
            pageIndex: 1,
            // pageIndex: this.currentPage,
            // dataAreaCode: sessionStorage.getItem("dataAreaCode"),
            startTime: "2018-10-06 00:00:00",
            endTime: "2020-11-06 00:00:00",
            type: 1
          })
          .then(res => {
            let text = "";
            this.noticeText = [];
            res.array.forEach((element, index) => {
              text = text + " " + element.title;
              if (this.notices.length < 4) {
                this.notices.push(element.title);
              }
            });
            this.noticeText = text;
          })
          .catch(err => {
            console.log("异常", err);
          });
      },
      // 请求获取温度数据
      rquestPostTemperature() {
        this.post("laws/getTemperature")
          .then(res => {
            // this.temper =
            //   res.results[0].weather_data[0].date.split(" ")[1] +
            //   " " +
            //   res.results[0].weather_data[0].temperature.split("~")[1] +
            //   " ~ " +
            //   res.results[0].weather_data[0].temperature.split("~")[0] +
            //   "℃";
            this.temper =
              res.result.forecasts[0].week +
              "  " +
              res.result.forecasts[0].low +
              "℃ ~ " +
              res.result.forecasts[0].high +
              "℃";
          })
          .catch(err => {
            console.log("异常", err);
          });
      },
      // 请求热门活动数据
      loadHotActivities() {
        if (this.slow.isAuth) {
        // if (this.slow.isAuth && this.slow.userInfo.subscribe != 0) {
          this.post("community_activity/loadInfo", {
              pageIndex: 1,
              pageSize: 15,
              // dataAreaCode: sessionStorage.getItem("dataAreaCode"),
              title: "",
              startTime: "2019-01-01",
              endTime: "",
              activityType: "",
              activityStatus: ""
            })
            .then(r => {
              if (r.list.length > 3) {
                for (let i = 0; i < 3; i++) {
                  this.hotActivities[i] = r.list[i];
                }
              } else {
                this.hotActivities = r.list;
              }
              console.log("activities", r);
            })
            .catch(err => {});
        } else {
          this.post("community_activity/loadInfo", {
              pageIndex: 1,
              pageSize: 15,
              dataAreaCode: '370503',
              title: "",
              startTime: "2019-01-01",
              endTime: "",
              activityType: "",
              activityStatus: ""
            })
            .then(r => {
              if (r.list.length > 3) {
                for (let i = 0; i < 3; i++) {
                  this.hotActivities[i] = r.list[i];
                }
              } else {
                this.hotActivities = r.list;
              }
              console.log("activities", r);
            })
            .catch(err => {});
        }
      },
      // 请求街坊看点数据列表
      requestPostNews() {
        if (this.slow.isAuth) {
          // if (this.slow.isAuth && this.slow.userInfo.subscribe != 0) {
          this.post("Info_publish/loadInfo_public", {
              pageSize: 10,
              // pageIndex: 1,
              pageIndex: this.currentPage,
              type: 4,
              dataAreaCode: sessionStorage.getItem("dataAreaCode")
            })
            .then(res => {
              console.log("home_news", res);
              if (res.array.length) {
                // this.list = this.list.concat(res.array);
                // this.pageIndex += 1;
                // this.totalCount = res.pageInfo.totalCount;
                this.allcount = Number(res.pageInfo.pageCount);
                this.list = res.array;
              }
            })
            .catch(err => {});
        } else {
          this.post("Info_publish/loadInfo_public", {
              pageSize: 10,
              // pageIndex: 1,
              pageIndex: this.currentPage,
              type: 4,
              dataAreaCode: '',
            })
            .then(res => {
              console.log("home_news", res);
              if (res.array.length) {
                // this.list = this.list.concat(res.array);
                // this.pageIndex += 1;
                // this.totalCount = res.pageInfo.totalCount;
                this.allcount = Number(res.pageInfo.pageCount);
                this.list = res.array;
              }
            })
            .catch(err => {});
        }
      },
      // 测试接口请求数据
      requestTest() {
        // this.post("Info_publish/loadInfo_public", {
        //   pageSize: 10,
        //   pageIndex: 1,
        //   type: 9
        // })
        //   .then(res => {
        //     console.log("home_news", res);
        //   })
        //   .catch(err => {});
      },
      startMove() {
        // eslint-disable-next-line
        let timer = setTimeout(() => {
          if (this.number === 2) {
            this.number = 0;
          } else {
            this.number += 1;
          }
          this.startMove();
        }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
      }
    },
    mounted() {
      this.startMove();
    }
  };
</script>

<style lang="scss" scoped>
  @import "~@/smobile.scss";
  .card {
    box-shadow: 1px 1px 6px #e6e6e6;
    margin-bottom: $sm-spacing-col-xl;
  }
  .home {
    .header {
      padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
      position: absolute; // width: $sm-img-per-max - 10%;
      width: 100%;
      z-index: 2;
      background: $sm-bg-color;
      display: flex;
      flex-direction: row nowrap;
      justify-content: space-between;
      box-sizing: border-box;
      .lp {
        display: flex;
        flex-direction: row nowrap;
        width: $sm-width-px-base;
        img {
          width: $sm-img-size-sm;
          height: 22px;
          margin-right: $sm-spacing-row-sm;
        }
        .mainTitle {
          font-weight: bold;
          width: $sm-width-px-max;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: $sm-font-size-lg;
          margin-left: $sm-spaceing-block-mini;
        }
      }
      .rp {
        font-size: $sm-font-size-sm;
        line-height: 24px;
      }
    }
    .outermostMargin {
      // background: $sm-bg-color-grey;
      color: $sm-text-color;
      font-size: $sm-font-size-lg;
      overflow: auto;
      height: calc(100vh - 91px);
      margin: 41px 0 0 0;
      .carousel {
        margin: 0;
        padding: 0;
        height: $sm-img-per-mini;
        width: $sm-img-per-max;
        .carItem {
          width: $sm-img-per-max;
          img {
            width: $sm-img-per-max;
            height: $sm-img-per-max;
          }
          .szd {
            position: absolute;
            left: 2vw;
            bottom: 6vw;
            border-radius: 16px;
            font-size: 18px;
            color: #ffffff;
            padding: 3px 8px;
            background: rgba(0, 0, 0, 0.4);
          }
        }
      }
      .mynotice {
        img {
          width: 22px;
          height: 18px;
          margin-right: 5px;
        }
        .van-notice-bar__content {
          width: 100%;
        }
      }
      .entrance {
        padding: 0 $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
        background: $sm-bg-color;
        .etRowBox {
          display: flex;
          flex-direction: row nowrap;
          justify-content: space-between;
          .etButton {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              width: $sm-img-per-lg;
              height: $sm-img-per-lg;
              margin: $sm-spacing-row-base $sm-spacing-row-base $sm-spacing-row-md $sm-spacing-row-base;
            }
            .ideText {
              font-size: $sm-font-sizeVH-sm;
            }
          }
        }
      }
      .hot {
        padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
        margin: $sm-spacing-col-sm 0 $sm-spacing-col-sm 0;
        background: $sm-bg-color;
        display: flex;
        flex-direction: column;
        .title {
          display: flex;
          justify-content: space-between;
          background-image: url("../assets/newhome/titbg.png");
          background-repeat: no-repeat;
          background-size: cover;
          height: 35px;
          .rpText {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            position: relative;
            color: #ffffff;
            margin-left: 15px;
            letter-spacing: 1px;
          }
          .lpText {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: $sm-font-size-sm;
            color: $sm-text-color;
            &:after {
              // 利用伪类元素 设置图7_11.png 作为项目符号
              content: "";
              margin-left: $sm-pseudo-width-base;
              width: $sm-pseudo-width-lg;
              height: $sm-pseudo-height-lg;
              background-image: url("../assets/home/7_14.png");
              background-size: $sm-img-size-xm;
            }
          }
        }
        .top3 {
          display: flex;
          flex-direction: row nowrap;
          justify-content: space-between;
          align-items: baseline;
          margin: $sm-spacing-col-lg 0 0 0;
          .hotBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 28vw;
            height: $sm-img-per-max;
            box-shadow: 1px 1px 6px #e6e6e6;
            &:first-child {
              margin-left: 0px;
            }
            &:last-child {
              margin-right: 0px;
            }
            img {
              width: 100%;
            }
            .wzy {
              padding: 0 1vw;
              font-size: $sm-font-size-sm;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 26vw;
            }
          }
        }
      }
      .spot {
        padding: $sm-spaceing-block-sm $sm-spaceing-block-base $sm-spaceing-block-sm $sm-spaceing-block-base;
        margin: $sm-spacing-col-sm 0 $sm-spacing-col-sm 0;
        background: $sm-bg-color;
        display: flex;
        flex-direction: column;
        .title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-weight: bold;
          background-image: url("../assets/newhome/titbg.png");
          background-repeat: no-repeat;
          background-size: cover;
          height: 35px;
          span {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            position: relative;
            color: #ffffff;
            margin-left: 15px;
            letter-spacing: 1px;
          } // &:before {
          //   // 利用伪类元素 设置图7_11.png 作为项目符号
          //   content: "";
          //   margin-right: $sm-pseudo-width-base;
          //   width: $sm-pseudo-width-sm;
          //   height: $sm-pseudo-height-xl;
          //   background-image: url("../assets/home/7_11.png");
          //   border-radius: $sm-border-radius-md;
          // }
        }
        .listBox {
          display: flex;
          flex-direction: column;
          .boxli {
            box-shadow: 1px 1px 6px #e6e6e6;
            border-radius: 4px;
            padding-left: $sm-spacing-row-lg;
            padding-right: $sm-spacing-row-lg;
            padding-bottom: $sm-spacing-row-lg;
            overflow: hidden;
            margin-bottom: $sm-spacing-row-lg;
            margin-left: $sm-spacing-row-lg;
            margin-right: $sm-spacing-row-lg;
            .titles {
              // display: flex;
              // flex-direction: column;
              margin: $sm-spacing-col-xl 0 0 0;
              .mainTitle {
                font-size: $sm-font-size-lg;
                font-weight: bold;
                color: $sm-color-title;
              }
              p {
                span:nth-child(1) {
                  margin-right: 15px;
                  font-size: $sm-font-size-sm;
                  background: #e5b03e;
                  padding: 3px 6px;
                  border-radius: 12px;
                  color: #ffffff;
                }
                .time {
                  color: $sm-text-color-grey;
                  font-size: $sm-font-size-sm; // margin-top: 5px;
                }
              }
            }
          }
          .summary {
            margin: $sm-spacing-col-lg 0 $sm-spacing-col-lg 0;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            color: $sm-color-title;
            font-size: $sm-font-size-base;
          }
          .images {
            display: flex;
            flex-direction: row nowrap;
            justify-content: space-between;
            margin: $sm-spacing-col-base 0 0 0;
            img {
              height: $sm-img-per-mini;
              width: $sm-img-per-mini;
            }
          }
        }
      }
    }
    .tabbarBox {
      .tabbarItem {
        justify-content: flex-end;
        margin-bottom: $sm-spacing-col-base;
        z-index: 2;
        .tabbarIcon {
          height: $sm-icon-px-lg !important;
        }
      }
    }
  }
  .textBox {
    width: 100%;
    height: 38px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative; // text-align: center;
  }
  .text {
    max-width: 350px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateY(15px) scale(1);
    opacity: 1;
  }
  .slide-leave-to {
    transform: translateY(-15px) scale(0.8);
    opacity: 0;
  }
</style>
